<template>
   <div>
      <xdh-table v-if="fieldValue.length" @bottonClick="bottonClick" :columns="fieldValue" :note="note" :key="getkey()" ref="dragTable" :listQueryData="listQuery" :tableIsShow="false" :seachFrom="htmlList" :leftButton="leftButton" :rightButton="rightButton"  :data="tableData" :empty-text='emptyText'  border stripe  @refreshInit="refreshInit" @submitSearchForm="submitSearchForm" @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange">
        
      </xdh-table>
      <div v-else style="margin-top:10px;padding:20px;text-align:center;border:1px solid rgba(0, 21, 41, 0.08);">没有找到模板信息</div>

   </div>
</template>
<script>
import xdhTable from '@/widgets/xdh-table'
import { getInfo } from '@/api/tpl'
import { commonGetInfo } from '@/api/common'
import { buildTree } from '@/utils/convert'
import { mapGetters } from 'vuex'
import analysisRouterParam from '@/utils/analysis-router-param.js'

export default {
  components: { xdhTable },
  name:'AlertTableHtml',
  props:{
      data:{
          type:[Object,Array],
          default:()=>{}
      }
  },    
  data() {
    return {
      expandAll: true,
      formData: {},
      tab_id: 0,
      ajax_url: '',
      index_url: '',
      note:'',
      htmlTable:[],
      htmlList: [],
      rightButton:[],
      leftButton:[],
      load: null,
      tableData:[],
      emptyText:'没有找到你要的内容哦！',
      listQuery: {
          page: 1,
          total: 10,
          totalCount:0,
          pageSizes:[10,20,50,100, 200, 300, 400],
          search:{}
      },
      isKeys:'',
    }
  },
  mounted() {
    
  },
  computed: {
      fieldValue: {
        get() {
            this.index_url = this.$attrs.index_url;
         
            this.ajax_url = this.$attrs.ajax_url;
            this.htmlTable = this.$attrs.template_content.table;
            this.note = this.$attrs.note;
            this.htmlList = this.$attrs.template_content.searchForm[0].content;

            if(this.$attrs.template_content.leftButton) {
              this.leftButton = this.$attrs.template_content.leftButton;
            }

             if(this.$attrs.template_content.rightButton) {
              this.leftButton = this.$attrs.template_content.rightButton;
            }

            this.getDatas();
            return this.htmlTable;
        },
        set(val) {
          this.$emit('input', val)
        }
      }
  },
  methods: {
    refreshInit(){
      this.listQuery.search = {};
      this.getDatas();
    },
    //请求列表数据
    async getDatas() {
       var routerUrl = analysisRouterParam.init(this.index_url,this.data,true);
       console.log(routerUrl,this.data);
      const res = await commonGetInfo(routerUrl.path, routerUrl.query);
      
      if (res && res.code === 200) {
        this.tableData = res.data.list;
        this.listQuery.totalCount = res.data.totalCount;
        console.log('list',res.data);
      }   
    },
    //搜索
    async submitSearchForm(formDatas) {
        //搜索
        this.listQuery.search = formDatas;
        console.log(this.listQuery,formDatas,'搜索')
        this.getDatas();
    },
    getkey() {
       if(!this.isKeys) {
        this.isKeys =  Math.random();
      }
      return this.isKeys;
    },
    handleCurrentChange(val){
      console.log(val,this.listQuery)
      this.listQuery.page = val;
      this.getDatas();
    },
    handleSizeChange(val){
      console.log('handleSizeChange',val)
      this.listQuery.total = val;
      this.getDatas();
    },
    bottonClick(obj){
      this.$emit('bottonClick',obj);
    }
  }
}
</script>
